// 购物车
<template>
  <div class="shopBox">
    <div class="selectedBox">
      <span>已选商品</span>
      <span class="spankong"></span>
      <div class="deleteFilm">清空</div>
    </div>

    <div class="commoDityBox">
      <span class="dity">商品名称</span>
      <span class="moneyBox">￥50</span>
      <span class="addOrLose">
        <button class="btnlose">-</button>
        <input type="text" class="numText">
        <button class="addFilm">+</button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "shoppingBox"
};
</script>

<style lang="scss">
@import "@/style/common/px2rem.scss";
.shopBox {
  width: 100%;
  height: px2rem(150);
  position: fixed;
  bottom: 0;
  background: white;
  // z-index: 1;
  // display: none;
  .selectedBox {
    display: flex;
    width: 100%;
    height: px2rem(50);
    background: #eee;
    span {
      display: flex;
      width: 50%;
      padding-left: px2rem(10);
      align-self: center;
    }
    .spankong {
      display: flex;
      flex: 1;
    }
    .deleteFilm {
      display: flex;
      width: 20%;
      height: px2rem(50);
      align-items: center;
      justify-content: center;
    }
  }
  .commoDityBox {
    display: flex;
    height: px2rem(50);
    width: 100%;
    padding-left: px2rem(10);
    border-bottom: px2rem(1) solid #eee;
    .dity {
      width: 50%;
      align-self: center;
    }
    .moneyBox {
      display: flex;
      width: 20%;
      justify-content: center;
      align-items: center;
      color: red;
    }
    .addOrLose {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-around;
      .numText {
        width: px2rem(30);
        text-align: center;
        border-radius: 20%;
        border: px2rem(1) solid #000;
        outline: none;
      }
      button {
        width: px2rem(30);
        height: px2rem(30);
        border-radius: 50%;
        outline: none;
      }
    }
  }
}
</style>
